<script setup lang="ts">
// 定义组件参数及其默认值
const props = withDefaults(
    defineProps<{
      width: string,
      height: string,
      minHeight: string,
    }>(),
    {
      width: '100%',
      height: 'auto',
      minHeight: '100vh'
    }
)

// 根据组件参数声明相应的 css 变量
const cssVar = {
  '--width': props.width,
  '--height': props.height,
  '--min-height': props.minHeight,
}
</script>

<template>
  <!-- 动态渐变背景 -->
  <view
      class="dynamic-gradient-bg"
      :style="cssVar"
  >
    <!-- 内容插槽 -->
    <slot></slot>
  </view>
</template>

<style scoped lang="scss">
.dynamic-gradient-bg {
  width: var(--width);
  height: var(--height);
  min-height: var(--min-height);
  background-color: #abc6f8;
  background-image: radial-gradient(closest-side, rgb(255, 255, 255), rgba(235, 105, 78, 0)),
  radial-gradient(closest-side, rgb(250, 203, 203), rgba(243, 11, 164, 0)),
  radial-gradient(closest-side, rgb(237, 252, 202), rgba(254, 234, 131, 0)),
  radial-gradient(closest-side, rgb(197, 248, 241), rgba(170, 142, 245, 0)),
  radial-gradient(closest-side, rgb(206, 200, 243), rgba(248, 192, 147, 0));
  background-size: 130vmax 130vmax, 80vmax 80vmax, 90vmax 90vmax, 110vmax 110vmax, 90vmax 90vmax;
  background-position: -80vmax -80vmax, 60vmax -30vmax, 10vmax 10vmax, -30vmax -10vmax, 50vmax 50vmax;
  background-repeat: no-repeat;
  animation: 10s bg-movement linear infinite;
}

// 背景移动动画
@keyframes bg-movement {
  0%,
  100% {
    background-size: 130vmax 130vmax, 80vmax 80vmax, 90vmax 90vmax, 110vmax 110vmax, 90vmax 90vmax;
    background-position: -80vmax -80vmax, 60vmax -30vmax, 10vmax 10vmax, -30vmax -10vmax, 50vmax 50vmax;
  }
  25% {
    background-size: 100vmax 100vmax, 90vmax 90vmax, 100vmax 100vmax, 90vmax 90vmax, 60vmax 60vmax;
    background-position: -60vmax -90vmax, 50vmax -40vmax, 0vmax -20vmax, -40vmax -20vmax, 40vmax 60vmax;
  }
  50% {
    background-size: 80vmax 80vmax, 110vmax 110vmax, 80vmax 80vmax, 60vmax 60vmax, 80vmax 80vmax;
    background-position: -50vmax -70vmax, 40vmax -30vmax, 10vmax 0vmax, 20vmax 10vmax, 30vmax 70vmax;
  }
  75% {
    background-size: 90vmax 90vmax, 90vmax 90vmax, 100vmax 100vmax, 90vmax 90vmax, 70vmax 70vmax;
    background-position: -50vmax -40vmax, 50vmax -30vmax, 20vmax 0vmax, -10vmax 10vmax, 40vmax 60vmax;
  }
}
</style>